import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "douyin",
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            color: Colors.red,
          ),
          child: Home(),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 60,
            decoration: BoxDecoration(color: Colors.black),
            child: BottomBar(),
          ),
        ),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height;
    double rpx = screenWidth / 750;

    return Stack(
      children: [
        Positioned(
          top: 0,
          width: screenWidth,
          child: SafeArea(
              child: Container(
            child: TopTab(),
          )),
        ),
        Positioned(
          bottom: 0,
          width: 0.7 * screenWidth,
          height: 260 * rpx,
          child: Container(
            child: BottomContent(),
          ),
        ),
        Positioned(
          right: 0,
          width: 0.25 * screenWidth,
          top: 0.4 * screenHeight,
          height: 600 * rpx,
          child: Container(
            child: getBottomList(rpx),
          ),
        ),
        Positioned(
          bottom: 20 * rpx,
          right: 0,
          width: 0.25 * screenWidth,
          height: 0.25 * screenWidth,
          child: Container(
            child: RotateAlbum(),
          ),
        )
      ],
    );
  }
}

class TopTab extends StatefulWidget {
  @override
  _TopTabState createState() => _TopTabState();
}

class _TopTabState extends State<TopTab> with SingleTickerProviderStateMixin {
  TabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TabController(vsync: this, length: 2, initialIndex: 1);
  }

  @override
  Widget build(BuildContext context) {
    double rpx = MediaQuery.of(context).size.width / 750;
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        SizedBox(
          width: 17 * rpx,
        ),
        Icon(
          Icons.search,
          size: 50 * rpx,
          color: Colors.white,
        ),
        Container(
          child: Container(
              padding: EdgeInsets.symmetric(horizontal: 90 * rpx),
              width: 500 * rpx,
              child: TabBar(
                indicatorColor: Colors.white,
                indicatorPadding: EdgeInsets.symmetric(horizontal: 25),
                labelStyle: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
                unselectedLabelStyle: TextStyle(
                  color: Colors.green[700],
                  fontSize: 20,
                ),
                controller: _controller,
                tabs: <Widget>[
                  Text("关注"),
                  Text("推荐"),
                ],
              )),
        ),
        Icon(
          Icons.live_tv,
          size: 50 * rpx,
          color: Colors.white,
        ),
        SizedBox(
          width: 17 * rpx,
        ),
      ],
    );
  }
}

class BottomBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          getBottomTextWidget("首页", true),
          getBottomTextWidget("同城", false),
          AddIcon(),
          getBottomTextWidget("消息", false),
          getBottomTextWidget("我", false),
        ],
      ),
    );
  }
}

class AddIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 35,
      width: 60,
      child: Stack(children: [
        Positioned(
          height: 35,
          width: 50,
          child: Container(
            decoration: BoxDecoration(
                color: Colors.cyan, borderRadius: BorderRadius.circular(7)),
          ),
        ),
        Positioned(
          height: 35,
          width: 50,
          right: 0,
          child: Container(
            decoration: BoxDecoration(
                color: Colors.red, borderRadius: BorderRadius.circular(7)),
          ),
        ),
        Positioned(
          height: 35,
          width: 50,
          right: 5,
          child: Container(
            decoration: BoxDecoration(
                color: Colors.white, borderRadius: BorderRadius.circular(7)),
            child: Icon(Icons.add),
          ),
        )
      ]),
    );
  }
}

Widget getBottomTextWidget(String content, bool ifSelected) {
  var style;

  if (!ifSelected) {
    style = TextStyle(fontSize: 18, color: Colors.grey[600]);
  } else {
    style = TextStyle(fontSize: 18, color: Colors.white);
  }
  return Text(
    "$content",
    style: style,
  );
}

class BottomContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          ListTile(
            title: Text(
              "@人民日报",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            subtitle: Text(
              "山东黄金收到货就是大家还是得较好的手机号第三季度还是,山东黄金收到货就是大家还是得较好的手机号第三季度还是山东黄金收到货就是大家还是得较好的手机号第三季度还是",
              style: TextStyle(
                color: Colors.white,
              ),
              maxLines: 3,
              overflow: TextOverflow.ellipsis,
            ),
          ),
          Row(
            children: <Widget>[
              SizedBox(
                width: 10,
              ),
              Icon(
                Icons.music_note,
                color: Colors.white,
              ),
            ],
          )
        ],
      ),
    );
  }
}

class RotateAlbum extends StatefulWidget {
  @override
  _RotateAlbumState createState() => _RotateAlbumState();
}

class _RotateAlbumState extends State<RotateAlbum>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  var animation;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 2));
    animation = RotationTransition(
      turns: Tween(begin: 0.0, end: 1.0).animate(_controller)
        ..addStatusListener((staus) {
          if (staus == AnimationStatus.completed) {
            // _controller.forward(from: 0.0);
          }
        }),
      child: Container(
          child: CircleAvatar(
        backgroundImage: NetworkImage(
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569329396853&di=ecd479c777ccfbd8e092d850c219e60e&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201507%2F23%2F20150723115018_ma428.thumb.700_0.jpeg"),
      )),
    );

    _controller.forward(from: 0.0);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(15),
      child: animation,
    );
  }
}

getBottomList(double rpx) {
  double iconSize = rpx * 68;
  return Column(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: <Widget>[
      Container(
        width: 90 * rpx,
        height: 105 * rpx,
        child: Stack(
          children: [
            Container(
                width: 90 * rpx,
                height: 90 * rpx,
                child: CircleAvatar(
                  backgroundImage: NetworkImage(
                      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569329396853&di=ecd479c777ccfbd8e092d850c219e60e&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201507%2F23%2F20150723115018_ma428.thumb.700_0.jpeg"),
                )),
            Positioned(
              bottom: 0,
              left: 17.5,
              child: Container(
                width: 25,
                height: 25,
                decoration: BoxDecoration(
                  color: Colors.redAccent,
                  borderRadius: BorderRadius.circular(25),
                ),
                child: Icon(
                  Icons.add,
                  size: 20,
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
      IconText(
        text: "999w",
        icon: Icon(
          Icons.favorite,
          size: iconSize,
          color: Colors.redAccent,
        ),
      ),
      IconText(
        text: "999w",
        icon: Icon(
          Icons.feedback,
          size: iconSize,
          color: Colors.white,
        ),
      ),
      IconText(
        text: "999w",
        icon: Icon(
          Icons.reply,
          size: iconSize,
          color: Colors.white,
        ),
      )
    ],
  );
}

class IconText extends StatelessWidget {
  const IconText({Key key, this.icon, this.text}) : super(key: key);
  final Icon icon;
  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          icon,
          Text(
            "$text",
            style: TextStyle(color: Colors.white),
          ),
        ],
      ),
    );
  }
}
